<template>
  <view class="mb-4 rounded">
    <view class="text-xl font-bold text-black mb-1">
      大转盘
      <wd-button type="icon" icon="share" open-type="share" @click="openShareModal"></wd-button>
    </view>

    <wd-popup v-model="end" closable>
      <view class="w-full p-2 text-4 font-bold">恭喜您中奖了！！！</view>
      <view class="w-60 h-60 flex flex-col p-4 justify-around items-center">
        <image :src="prizeImage" class="w-50 h-50" mode="scaleToFill" />
        <view class="text-center">获得{{ prizeName }}</view>
      </view>
    </wd-popup>

    <!-- 次数 -->
    <view class="my-4 rounded-lg p-2 flex flex-col relative justify-center items-center">
      <text class="text-gray-800">
        我的大转盘次数:
        <text class="font-bold text-lg text-[#ff6a00]">{{ turntable }}</text>
      </text>

      <button open-type="share" @click="openShareModal" class="custom-btn">
        <image
          src="http://llcdn.jxsr.com/c7ea47e6-c254-4a4f-881b-45646f81007a).png"
          class="w-600rpx h-600rpx absolute top-0 left-0 z-1"
          mode="scaleToFill"
        />

        <view
          class="w-full min-h-16 leading-12 text-6 text-[#cd1300] bg-white/50 absolute z-2 bottom-24rpx left-0"
        >
          <i class="iconfont icon-fenxiang text-6 w-8 mr-1"></i>
          分享获取更多抽奖机会
        </view>
      </button>
    </view>

    <view class="grid gap-2 grid-rows-3 grid-cols-3 box" v-if="list.length > 0">
      <view class="prize-item w-full h-full" :class="{ active: activeIndex == 0 }">
        <image :src="list[0].prizeImage" mode="scaleToFill" />
        <view class="name">{{ list[0].prizeName }}</view>
        <view class="prize-active" v-if="activeIndex == 0"></view>
      </view>
      <view class="prize-item w-full h-full" :class="{ active: activeIndex == 1 }">
        <image :src="list[1].prizeImage" mode="scaleToFill" />
        <view class="name">{{ list[1].prizeName }}</view>
        <view class="prize-active" v-if="activeIndex == 1"></view>
      </view>

      <view class="prize-item w-full h-full" :class="{ active: activeIndex == 2 }">
        <image :src="list[2].prizeImage" mode="scaleToFill" />
        <view class="name">{{ list[2].prizeName }}</view>
        <view class="prize-active" v-if="activeIndex == 2"></view>
      </view>

      <view class="prize-item w-full h-full" :class="{ active: activeIndex == 7 }">
        <image :src="list[7].prizeImage" mode="scaleToFill" />
        <view class="name">{{ list[7].prizeName }}</view>
        <view class="prize-active" v-if="activeIndex == 7"></view>
      </view>
      <view class="begin" @click="turntableStart">
        <wd-icon name="pointing-hand" size="22px"></wd-icon>
        <text>开始</text>
      </view>
      <view class="prize-item w-full h-full" :class="{ active: activeIndex == 3 }">
        <image :src="list[3].prizeImage" mode="scaleToFill" />
        <view class="name">{{ list[3].prizeName }}</view>
        <view class="prize-active" v-if="activeIndex == 3"></view>
      </view>

      <view class="prize-item w-full h-full" :class="{ active: activeIndex == 6 }">
        <image :src="list[6].prizeImage" mode="scaleToFill" />
        <view class="name">{{ list[6].prizeName }}</view>
        <view class="prize-active" v-if="activeIndex == 6"></view>
      </view>
      <view class="prize-item w-full h-full" :class="{ active: activeIndex == 5 }">
        <image :src="list[5].prizeImage" mode="scaleToFill" />
        <view class="name">{{ list[5].prizeName }}</view>
        <view class="prize-active" v-if="activeIndex == 5"></view>
      </view>
      <view class="prize-item w-full h-full" :class="{ active: activeIndex == 4 }">
        <image :src="list[4].prizeImage" mode="scaleToFill" />
        <view class="name">{{ list[4].prizeName }}</view>
        <view class="prize-active" v-if="activeIndex == 4"></view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { reactive, toRefs, ref } from 'vue'
import { http } from '@/utils/http'
import { useUserStore } from '@/store/user'

const list = ref([])
const activeIndex = ref(-1)
const end = ref(false)

const prizeImage = ref('')
const prizeName = ref('')

const getAwardList = async () => {
  let res = await http({
    url: '/api/turntable/list',
    method: 'GET',
  })

  if (res.code == 200) {
    list.value = res.data.list
  }
}

getAwardList()

const turntable = ref(0)

const getTimes = async () => {
  let res = await http.get('/api/user/my')
  if (res.code == 200) {
    console.log('res', res)
    turntable.value = res.data.turntable
  }
}

getTimes()

// 用户点击开始抽奖
const turntableStart = async () => {
  end.value = false
  activeIndex.value = -1

  let interval

  try {
    let res = await http({
      url: '/api/turntable/draw',
      method: 'GET',
    })

    if (res.code == 200) {
      let type = res.data.type
      let pid = res.data.pid

      activeIndex.value = 0

      interval = setInterval(() => {
        activeIndex.value = (activeIndex.value + 1) % 8
      }, 100)

      setTimeout(() => {
        clearInterval(interval)

        interval = setInterval(() => {
          activeIndex.value = (activeIndex.value + 1) % 8

          if (
            list.value[activeIndex.value].productId == pid &&
            list.value[activeIndex.value].type == type
          ) {
            console.log('成功')

            clearInterval(interval)
            turntableSuccess(list.value[activeIndex.value], res.msg)
            end.value = true

            prizeImage.value = list.value[activeIndex.value].prizeImage
            prizeName.value = list.value[activeIndex.value].prizeName
          }
        }, 100)
      }, 3800)
    } else {
      clearInterval(interval)

      uni.showModal({
        title: '失败',
        content: res.msg,
        showCancel: true,
      })
    }
  } catch (error) {
    console.error('error', error)
  } finally {
    setTimeout(() => {
      clearInterval(interval)
      getTimes()
    }, 3000)
  }
}

const userStore = useUserStore()

const openShareModal = async () => {
  try {
    // 增加次数
    let res = await http.get('/api/user/assistSharing?type=1')

    if (res.code == 200) {
      let path = `/pages/turntable/index?invitationCode=${userStore?.userInfo?.invitationCode}`
      uni.showShareMenu({
        title: '邻里生活荟',
        content: '欢乐大转盘',
        imageUrl: 'http://llcdn.jxsr.com/6be15e12-dcdc-4974-a81c-2563afca248a0.jpg',
        path,
        success(result) {
          console.log('result', result)
        },
      })
    } else {
      uni.showToast({
        title: res.msg,
        icon: 'none',
        mask: false,
      })
    }
  } catch (error) {
    console.log('error', error)
    uni.showToast({
      title: '分享失败',
      icon: 'none',
      mask: false,
    })
  } finally {
    getTimes()
  }
}

// 抽奖完成后操作
const turntableSuccess = (obj, msg) => {
  uni.showToast({
    title: msg,
    icon: 'none',
    duration: 2000,
    success: () => {},
  })

  getTimes()
}
</script>

<style lang="scss" scoped>
.box {
  width: 100%;
  height: 686rpx;
}

.prize-item {
  position: relative;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40rpx;
  overflow: hidden;
  background: #ffffff;
  border: 2px solid #ffd700;
  border-radius: 12rpx;

  image {
    width: 100%;
    height: 100%;
  }

  .name {
    position: absolute;
    bottom: 0;
    left: 0;

    width: 100%;
    height: 40rpx;

    font-size: 24rpx;
    line-height: 40rpx;
    color: #fff;
    text-align: center;
    background-color: rgba(0, 0, 0, 0.5);
  }
}

.active {
  background-color: #ffe4b5;
  border: 2rpx solid rgb(0, 255, 132);
}

.custom-btn {
  position: relative;
  width: 600rpx;
  height: 600rpx;

  padding: 0;
  margin: 0;

  margin-top: 50rpx;

  cursor: pointer;
  background-color: transparent;
  border: none;
  outline: none;
}

.custom-btn::after {
  width: 100%;
  height: 100%;
  background-color: transparent;
  border: none;
}

.begin {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 90%;
  height: 90%;

  margin: 5%;
  font-size: 14px;
  font-weight: bold;
  color: #ffffff;

  background-color: #de090d;

  border: 2rpx solid #ffe4b5;

  border-radius: 12rpx;
}

.bg-custom {
  background-image: url('http://llcdn.jxsr.com/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20250411173220.jpg');
}
</style>
